<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常见移动端事件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<!--PC端跟鼠标相关事件
		click
		mousedown
		mousemove
		mouseup
		移动端事件关键词 touch
		touchstart
		touchmove
		touchend-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.click_box{
				width: 250px;
				height: 250px;
				background-color: skyblue;
			}
			.touch_box{
				width: 250px;
				height: 250px;
				background-color: yellow;
			}
			.slide_wrapper{
				width: 80%;
				margin: 0 auto;
				height: 40px;
				position: relative;
			}
			.silde_road{
				position: relative;
				margin-top: 20px;
				height: 20px;
				border: 1px solid #000;
			}
			.slide{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: skyblue;
				position: absolute;
				top:-10px;
				left: 0px;
			}
			
		</style>
		<div class="slide_wrapper">
			<div class="silde_road">
				<div class="slide"></div>
			</div>
		</div>
		<script type="text/javascript">
			var slide = document.querySelector(".slide");
			slide.addEventListener("touchstart",function(e){
				console.log(e.touches[0].clientX);
			})
		</script>
		<div class="click_box">
			IM_click_box
		</div>
		<div class="touch_box">
			IM_touch_box
		</div>
		
		
		<!--在移动端上看打印台信息，使用Vconsole-->
		<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vc = new VConsole();
			var clickBox = document.querySelector(".click_box");
			var touchBox = document.querySelector(".touch_box");
			
			clickBox.onclick=function(){
				console.log("click")
			}
			//给touchBox添加
			//touchstart,
			//touchmove
			//事件
			//做移动端的滑块验证
			touchBox.ontouchend = function(){
				console.log("touchend")
			}
			touchBox.ontouchstart = function(){
				console.log("touchstart")
			}
			touchBox.ontouchmove = function(){
				console.log("touchmove")
			}
		</script>
		
		
		
	</body>
</html>
